<template>

  <div class="tags-view-container" style="position: relative" v-if="showTags">
    <el-scrollbar ref="scrollContainer" :vertical="false" class="tags-view-wrapper scroll-container">
      <ul>
        <li v-for="(item,index) in tagsList" :key="index" :class="isActive(item.path)?'active':''"
            :style="activeStyle(item)"
            class="tags-view-item">
          <router-link class="tags-li-title"
                       :to="{ path: item.path, query: item.query}">
            {{ item.title == '内置页' ? store.state.tagsView.iframeTitle : item.title }}
          </router-link>
          <el-icon style="vertical-align: middle;" v-if="item.path!='/admin/dashboard'" class="el-icon-close"
                   @click="closeTags(index)">
            <Close/>
          </el-icon>
        </li>
      </ul>
    </el-scrollbar>
    <div class="tags-close-box">
      <el-dropdown @command="handleTags">
        <el-button type="primary">
          标签选项
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu size="small" slot="dropdown">
            <el-dropdown-item command="other">关闭其他</el-dropdown-item>
            <el-dropdown-item command="all">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, inject, reactive, onMounted, computed, watch, ComponentInternalInstance, getCurrentInstance} from 'vue';
import {useRoute, useRouter} from "vue-router";
import bus from 'vue3-eventbus';
import {useStore} from "vuex";

const route: any = useRoute()
const router: any = useRouter()
const store: any = useStore();
const home: any = reactive({
  name: "resource",
  path: "/admin/dashboard",
  title: "系统首页"
})
const {proxy} = getCurrentInstance() as ComponentInternalInstance

const isActive: any = (path: any) => {
  return path === route.path;
}
const activeStyle: any = (tag: any) => {
  if (!isActive(tag.path)) return {};
  return {
    "background-color": theme,
    "border-color": theme
  };
}
// 关闭单个标签
const closeTags = (index: any) => {
  let delitem = store.state.tagsView.tagsList[index]
  store.dispatch('tagsView/delVisitedView', index)
  if (route.path == delitem.path) {
    router.push(store.state.tagsView.tagsList[store.state.tagsView.tagsList.length - 1])
  }

}
// 关闭全部标签
const closeAll = () => {
  store.dispatch('tagsView/delAllVisitedViews')
  proxy!.$forceUpdate()
}
// 关闭其他标签
const closeOther = () => {
  store.dispatch('tagsView/delOthersVisitedViews', route)
  proxy!.$forceUpdate()

}

// 设置标签
const setTags = (route: any) => {
  // bus.emit('tags', tagsList);
  const isExist = store.state.tagsView.tagsList.some(item => {
    return item.path === route.path;
  })
  if (!isExist) {
    store.dispatch('tagsView/addVisitedView', route)
  } else {
    //更新已存在的tag信息
    store.state.tagsView.tagsList.some(item => {
      if (item.path === route.path) {
        item.title = route.meta.title
        item.query = route.query
        item.fullPath=route.fullPath
        item.name = route.name ? route.name : route.matched[1].components.default.name
        item.matched = route.matched ? route.matched : []
      }
    })
  }

}
const handleTags = (command: any) => {
  command === 'other' ? closeOther() : closeAll();
}
const tagsList = computed({
  get: () => store.state.tagsView.tagsList,
  set: (val) => {
  }
})
const showTags = computed({
  get: () => store.state.tagsView.tagsList.length > 0,
  set: (val) => {
  }
})
const theme = computed({
  get: () => store.state.settings.theme,
  set: (val) => {
  }
})
watch(() => route.path, (newPath, oldPath) => {
  setTags(route);
});
onMounted(() => {
  setTags(route);
  // 监听关闭当前页面的标签页
  bus.on('close_current_tags', () => {
    for (let i = 0, len = tagsList.length; i < len; i++) {
      const item = tagsList[i];
      if (item.path === route.fullPath) {
        if (i < len - 1) {
          router.push(tagsList[i + 1].path);
        } else if (i > 0) {
          router.push(tagsList[i - 1].path);
        } else {
          router.push('/');
        }
        tagsList.splice(i, 1);
        break;
      }
    }
  })
});

</script>


<style scoped>
.scroll-container {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.el-scrollbar__bar {
  bottom: 0px;
}

.el-scrollbar__wrap {
  height: 49px;
}

.tags-close-box {
  position: absolute;
  right: 0;
  top: 0;
  box-sizing: border-box;
  padding-top: 1px;
  text-align: center;
  width: 110px;
  height: 30px;
  background: #fff;
  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
  z-index: 10;
}

.tags-view-container {
  height: 34px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
}

.tags-view-container .tags-view-item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 25px;
  line-height: 25px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 4px;
}

.tags-view-container .tags-view-item:first-of-type {
  margin-left: 15px;
}

.tags-view-container .tags-view-item:last-of-type {
  margin-right: 15px;
}

.tags-view-container .tags-view-item.active {
  background-color: #42b983;
  color: #fff;
  border-color: #42b983;
}

.tags-view-container .tags-view-item.active a {
  color: #fff;
}


.tags-view-container .tags-view-item.active:before {
  content: '';
  background: #fff;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 2px;
}

.el-icon-close:hover {
  scale: 1.2;

}

.tags-li-title {
  color: #666;
}


</style>
